/* 给所有的li加点击事件 */
$('.GuanLi_j-nav li').click(function(){
    //给当前按钮加上active class
    $(this).addClass('active');
    //其他的li兄弟移除active class
    $(this).siblings().removeClass('active');
    //所有con的active清除掉。点击的这个按钮对应的con显示
    $('.con').removeClass('active');
    $('.con').eq($(this).index()).addClass('active');
})

    var someShop = [{
        id: 100001,
        twoid: 5336723567245,
        name: '泡泡糖',
        price:1,
        number: 100,
        second:null,
        first:null,
      },
      {
        id: 100002,
        twoid: 5336723567245,
        name: '泡泡糖2',
        price:1,
        number: 100,
        second:null,
        first:null,
      },
      {
        id: 100003,
        twoid: 5336723567245,
        name: '泡泡糖3',
        price:1,
        number: 100,
        second:null,
        first:null,
      },
      {
        id: 100004,
        twoid: 5336723567245,
        name: '泡泡糖4',
        price:1,
        number: 100,
        second:null,
        first:null,
      },
      
    ]
    var maxPage = 0
    var dangqianyeNum = 1
    showYema()
    showTbale(dangqianyeNum)
    function showTbale(dangqianye) {
      let qishi = (dangqianye - 1) * 3
      let data = someShop.slice(qishi, qishi + 3)
      $('#someShopTable').html('')
      for (var i = 0; i < data.length; i++) {
        $('#someShopTable').append(`<tr>
          <td>${data[i].id}</td>
          <td>${data[i].twoid}</td>
          <td>${data[i].name}</td>
          <td>${data[i].price}</td>
          <td>${data[i].number}</td>
          <td>${data[i].second}</td>
          <td>${data[i].first}</td>
          <td>
   
            <button type="button" class="btn btn-warning" data-toggle="modal" data-target="#exampleModal" 
            data-id="${data[i].id}"
            data-twoid="${data[i].twoid}"
            data-name="${data[i].name}"
            data-price="${data[i].price}"
            data-number="${data[i].number}"
            data-second="${data[i].second}"
            data-first="${data[i].first}"
            >修改</button>
            <button onclick="delRow(${data[i].id})" type="button" class="btn btn-danger">删除</button>
          </td>
        </tr>`)
      }
      $('.pages').eq(dangqianye - 1).addClass('active').siblings().removeClass('active')
    }

    function showYema() {
      $('.pages').remove()
      maxPage = Math.ceil(someShop.length / 3)  
      for (var i = 1; i <= maxPage; i++) {
        $('#next').before(`
        <li class='pages' onclick='changeYema(this)'><a href="#">${i}</a></li>
      `)
      }
      $('.pages').eq(dangqianyeNum - 1).addClass('active').siblings().removeClass('active')
    }

    function changeYema(obj) {
      dangqianyeNum = parseInt($(obj).children().text())
      showTbale(dangqianyeNum)
    }

    function prevPage() {
      if (dangqianyeNum > 1) {
        dangqianyeNum = dangqianyeNum - 1
        showTbale(dangqianyeNum)
      }


    }

    function nextPage() {
      if (dangqianyeNum < maxPage) {
        dangqianyeNum = dangqianyeNum + 1
        showTbale(dangqianyeNum)
      }
    }

    function delRow(id) {
      console.log(id)
      for (var i = 0; i < someShop.length; i++) {
        if (someShop[i].id == id) {
          someShop.splice(i, 1)
        }
      }
      console.log(someShop)
      showTbale(dangqianyeNum)
      showYema()
    }

    $('#exampleModal').on('show.bs.modal', function (event) {
      var button = $(event.relatedTarget)
      var id = button.data('id')
      var twoid = button.data('twoid')
      var name = button.data('name')
      var price = button.data('price')
      var number = button.data('number')
      var second = button.data('second')
      var first = button.data('first')


      var modal = $(this)
      modal.find('.modal-body #shopId').val(id)
      modal.find('.modal-body #shopTwoid').val(twoid)
      modal.find('.modal-body #shopName').val(name)
      modal.find('.modal-body #shopPrice').val(price)
      modal.find('.modal-body #shopNumber').val(number)
      modal.find('.modal-body #shopSecond').val(second)
      modal.find('.modal-body #shopFirst').val(first)
    })

    function changeshop() {
      var id = $('#shopId').val()
      var twoid = $('#shopTwoid').val()
      var name = $('#shopName').val()
      var price = $('#shopPrice').val()
      var number = $('#shopNumber').val()
      var second = $('#shopSecond').val()
      var first = $('#shopFirst').val()
      console.log(id,twoid,name, number, price,second,first)
      var newshop = {
        id: id,
        twoid: twoid,
        name: name,
        price: price,
        number: number,
        second: second,
        first: first,
      }
      for (var i = 0; i < someShop.length; i++) {
        if (id == someShop[i].id) {
          someShop.splice(i, 1, newshop)
        }
      }

      $('#exampleModal').modal('hide')
      showTbale(dangqianyeNum)
    }

    $('#addshop').on('show.bs.modal', function (event) {
      var id = parseInt(Math.random() * 1000000)
      var modal = $(this)
      modal.find('.modal-body #addshopId').val(id)
      modal.find('.modal-body #addshopTwoid').val("")
      modal.find('.modal-body #addshopName').val("")
      modal.find('.modal-body #addshopPrice').val("")
      modal.find('.modal-body #addshopNumber').val("")
      modal.find('.modal-body #addshopSecond').val("")
      modal.find('.modal-body #addshopFirst').val("")


    })

    function addsomeShop() {
      console.log(123123)
      var id = $('#addshopId').val()
      var twoid = $('#addshopTwoid').val()
      var name = $('#addshopName').val()
      var price = $('#addshopPrice').val()
      var number = $('#addshopNumber').val()
      var second = $('#addshopSecond').val()
      var first = $('#addshopFirst').val()
      console.log(id, name)
      var newshop = {
        id: id,
        twoid: twoid,
        name: name,
        price: price,
        number: number,
        second: second,
        first: first,
      }
      console.log(newshop)
      someShop.push(newshop)
      $('#addshop').modal('hide')
      showTbale(dangqianyeNum)
      showYema()

    }